<template>
  <div class="main ad-manage-list">
    <section>
      <div v-if="rightsButtons['add']" class="btn-block">
        <el-button type="success" size="small" plain @click="addWhite">添加白名单</el-button>
      </div>
      <search-form
        :listQuery="listQuery"
        :queryConfig="queryConfig"
        :labelWidth="100"
        :search="search"
      />
      <el-table
        :data="list"
        v-loading="listLoading"
        element-loading-text="给我一点时间"
        border
        highlight-current-row
      >
        <el-table-column
          align="center"
          label="序号"
          type="index"
          width="60"
        ></el-table-column>
        <el-table-column
          align="center"
          label="手机号码"
          prop="mobile"
        ></el-table-column>
        <el-table-column
          align="center"
          label="真实姓名"
          prop="realName"
        ></el-table-column>
        <el-table-column
          align="center"
          label="创建时间"
          prop="createdAt"
        ></el-table-column>
        <el-table-column
          align="center"
          label="操作"
          width="200"
          v-if="rightsButtons['delete']"
        >
          <template slot-scope="scope">
            <template>
              <el-button
                type="danger"
                size="mini"
                plain
                @click="delWhite(scope.row.id)"
              >删除</el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="listQuery.pageNo"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="listQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="listTotal"
      ></el-pagination>
    </section>
    
    <el-dialog
      title="添加白名单"
      :visible.sync="whiteListDialog"
      width="30%"
      @close="handleDialogClose"
    >
      <el-form :model="whiteForm" :rules="whiteRules" ref="whiteForm" label-width="100px">
        <el-form-item label="白名单" prop="mobiles">
          <el-input
            type="textarea"
            rows="5"
            v-model="whiteForm.mobiles"
            placeholder="请输入白名单手机号，多个手机号请换行输入"
          ></el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="whiteListDialog = false;">取 消</el-button>
        <el-button type="primary" @click="handleWhiteList('whiteForm')">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="添加结果"
      :visible.sync="resultDialog"
      width="30%"
      @close="resultClose"
    >
      <div style="margin-bottom: 10px">成功添加{{successNum}}个用户，{{errorNum}}个异常</div>
      <el-table
        :data="resultList"
        border
        highlight-current-row
      >
        <el-table-column
          align="center"
          label="手机号码"
          prop="mobile"
        ></el-table-column>
        <el-table-column
          align="center"
          label="失败原因"
          prop="errorInfo"
        ></el-table-column>
      </el-table>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="resultDialog = false;">关 闭</el-button>
        <el-button type="primary" @click="resultDialog = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import SearchForm from '@/components/searchForm'
export default {
  name: 'bzb-whitelist',
  components: {
    SearchForm
  },
  data() {
    return {
      successNum: 0,
      errorNum: 0,
      whiteForm: {
        mobiles: '', // 白名单号码
      },
      whiteRules: {
        mobiles: [
          { required: true, message: '请输入白名单号码', trigger: 'blur' }
        ],
      },
      resultList: [], // 白名单结果
      list: [], // 首页列表
      resultDialog: false, // 添加结果弹窗
      listLoading: false,
      whiteListDialog: false, // 白名单弹框
      listTotal: 0,
      listQuery: {
        realName: '',
        mobile: '',
        pageNo: 1,
        pageSize: 10
      },
      queryConfig: [
        {
          prop: 'realName',
          type: 'input',
          label: '真实姓名'
        },
        {
          prop: 'mobile',
          type: 'input',
          label: '手机号'
        }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 白名单添加成功
    resultClose () {
      this.getList()
      if (this.successNum !== 0) {
        this.$message.success('添加成功')
      } else {
        this.$message.warning('没有成功的用户，未添加成功')
      }
    },
    // 处理冻结弹框关闭
    handleDialogClose () {
      this.whiteForm.mobiles = ''
      this.$refs['whiteForm'].clearValidate()
    },
    // 删除白名单
    addWhite () {
      this.whiteListDialog = true
    },
    // 删除白名单
    delWhite (id) {
      this.$confirm('确认将该用户从白名单中移除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
        }).then(() => {
          this.request({
            url: `/live-bzb-manage/anchor/white/delete/${id}`,
            method: 'post',
            data: {}
          }).then((res) => {
            if(res.code===200) {
              this.$message.success('删除成功')
              this.getList()
            }
          }).catch(err => {
            console.log(err);
          })
        }).catch(err => {
          console.log(err)
        })
    },
    // 处理添加白名单
    handleWhiteList (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.request({
            url: '/live-bzb-manage/anchor/white/add',
            method: 'post',
            data: {
              mobiles: this.whiteForm.mobiles.replace(/\n/g, ",")
            }
          }).then((res) => {
            if (res.code === 200 || res.status === 200) {
              let myData = res.data
              this.resultList = myData.errorInfos
              this.successNum = myData.successNum
              this.errorNum = myData.errorNum
              this.whiteListDialog = false
              this.resultDialog = true
            }
          }).catch(err => {
            console.log(err);
          })
        } else {
          this.whiteListDialog = true
          this.$message.error('白名单必填')
        }
      })
    },
    getList() {
      this.request({
        url: '/live-bzb-manage/anchor/white/query',
        method: 'get',
        params: { ...this.listQuery }
      }).then((data) => {
        let myData = data.data
        this.list = myData.records
        this.listTotal = myData.total
        this.listLoading = false
      }).catch(err => {
        console.log(err);
        this.list = [];
        this.listTotal = 0;
        this.listLoading = false
      })
    },
    // 搜索
    search() {
      this.listQuery.pageNo = 1
      this.getList()
    },
    // 切换分页
    handleCurrentChange(page) {
      this.listQuery.pageNo = page
      this.getList()
    },
    // 切换分页数
    handleSizeChange(pageSize) {
      this.listQuery.pageSize = pageSize
      this.getList()
    }
  }
}
</script>

<style></style>
